<template>
  <div id="complete">
    <div class="center">
      <div class="title">
        <h2>🎉 恭喜您，注册成功！</h2>
        <p>为了让您拥有更好的体验，请完善以下信息</p>
      </div>
      <el-form
        ref="update_form"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="form.username"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>

        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.qq" placeholder="请输入QQ号"></el-input>
        </el-form-item>

        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>

        <el-form-item label="职业" prop="jobTitle">
          <el-select v-model="form.jobTitle" placeholder="请选择您的职业">
            <el-option label="学生" value="student"></el-option>
            <el-option label="职场人员" value="work"></el-option>
            <el-option label="自由职业" value="freelancer"></el-option>
            <el-option label="创业者" value="entrepreneur"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="年级">
          <el-select v-model="form.grade" placeholder="请选择您的年级">
            <el-option label="小学" value="1"></el-option>
            <el-option label="中学" value="2"></el-option>
            <el-option label="大学" value="3"></el-option>
            <el-option label="研究生" value="4"></el-option>
            <el-option label="博士" value="5"></el-option>
            <el-option label="博士后" value="6"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="专业行业" prop="industry">
          <el-select v-model="form.industry" placeholder="请选择您的行业">
            <el-option label="IT" value="IT"></el-option>
            <el-option label="金融" value="finance"></el-option>
            <el-option label="教育" value="education"></el-option>
            <el-option label="医疗" value="medical"></el-option>
            <el-option label="法律" value="law"></el-option>
            <el-option label="制造业" value="manufacturing"></el-option>
            <el-option label="能源" value="energy"></el-option>
            <el-option label="艺术" value="art"></el-option>
            <el-option label="传媒" value="media"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="期待资源" prop="wantResources">
          <el-select
            v-model="form.wantResources"
            multiple
            placeholder="请选择您的期待资源"
          >
            <el-option label="学习资料" value="study"></el-option>
            <el-option label="编程资源" value="coding"></el-option>
            <el-option label="职场技能" value="career"></el-option>
            <el-option label="社交圈子" value="social"></el-option>
            <el-option label="在线课程" value="online_course"></el-option>
            <el-option label="AI人工智能" value="AI"></el-option>
            <el-option label="区块链" value="blockchain"></el-option>
            <el-option label="心理健康" value="mental_health"></el-option>
            <el-option label="健身运动" value="fitness"></el-option>
            <el-option label="投资理财" value="finance"></el-option>
            <el-option label="娱乐休闲" value="entertainment"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址"></el-input>
        </el-form-item>

        <el-form-item label="个人简介" prop="bio">
          <el-input
            type="textarea"
            v-model="form.bio"
            placeholder="请填写个人简介"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      form: {
        username: "",
        email: "",
        phone: "",
        jobTitle: "",
        grade: "",
        industry: "",
        qq: "",
        birthday: "",
        sex: "",
        address: "",
        wantResources: [],
        bio: "",
      },
      rules: {
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        qq: [{ required: true, message: "请输入QQ号", trigger: "blur" }],
        birthday: [
          { required: true, message: "请选择生日", trigger: "change" },
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        jobTitle: [
          { required: true, message: "请选择职业", trigger: "change" },
        ],
        wantResources: [
          { required: true, message: "请选择期待资源", trigger: "change" },
        ],
        bio: [{ required: true, message: "请输入个人简介", trigger: "blur" }],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.update_form.validate((valid) => {
        if (valid) {
          this.form.wantResources = this.form.wantResources.join(",");

          this.$http.post("/api/sysUser/complete", this.form).then((res) => {
            if (res.data.code === 200) {
              this.$message.success("信息补全成功");
              this.$router.push("/index");
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    getUserInfo() {
      this.$http.get("/api/sysUser/detail").then((res) => {
        this.form = res.data.data;
        // 🚀 确保 wantResources 是数组
        if (typeof this.form.wantResources === "string") {
          if (this.form.wantResources.length === 0) {
            this.form.wantResources = [];
          } else {
            this.form.wantResources = this.form.wantResources.split(",");
          }
          // this.form.wantResources = this.form.wantResources.split(",");
        }
      });
    },
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
#complete {
  .center {
    width: 30%;
    margin: 0 auto;
    padding-top: 50px;

    .title {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }

    h2 {
      color: #409eff;
    }

    .el-button {
      // width: 100%;
    }
  }
}
</style>
